<template>
    <div style="display:inline-block;padding: 10px;width: 100%;" >
        <div class="left_room" v-for="(room,i) in rooms" :key="i" @click="getRoomEquipmentData(room.roomNum)">
                <span>{{ room.roomPlace }} - {{ room.roomNum }}</span>
        </div>
    </div>
</template>

<script>
import {
    getRoomNums,getRoomEquipmentData
} from "@/api/iot/device";
export default {
    data() {
        return {
            // 设备统计信息
            rooms: {},  
            timer: null,
        };
    },
    created() {
        this.getData()
    },
    beforeDestroy() {
        this.clearData()
    },
    methods: {
        getData(){
            getRoomNums().then(response => {
                if (response.code == 200) {
                    this.rooms = response.data;
                    
                    // 轮询
                    this.switper();
                }
            });
        },
        getRoomEquipmentData(roomNum){
            getRoomEquipmentData(roomNum).then(response => {
                if (response.code == 200) {
                    this.roomEquipmentData = response.data;
                    for(let i =0 ;i<this.roomEquipmentData.actuator.length;i++){
                        this.roomEquipmentData.actuator[i].deviceData = this.roomEquipmentData.actuator[i].deviceData == "1" ? true:false
                    }
                    this.$store.commit('setRoomEquipmentData',this.roomEquipmentData);
                }
            });
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(looper, 10000);
        },

    },
};
</script>
<style scoped>
.left_room{
    width: 44%;
    float: left;
    text-align: center;
    background-color:rgba(251, 251, 251, 0.18);
    height: 50px;
    margin: 10px;
    line-height: 50px;
    color: white;
    font-size: 20px;
    border-radius: 10px;
}

.left_room:hover{
    background-color:aqua;
    cursor:pointer;
}
</style>
